<template>
	<view class="c-box" @click.stop="goUrl">
		<view class="coupon-com -flex">
			<view class="cp-l -flex -flex-col -flex-ac -flex-jc">
				<view class="cpp-l-num -flex -flex-ac">
					<text class="cp-ico" v-if="coupon.type == 1">¥</text>
					<text class="cp-no">{{ parseFloat(coupon.denomination) || 0 }}</text>
					<text class="cp-ico cp-icr" v-if="coupon.type == 2">折</text>
				</view>
				<view class="cp-tip">
					{{ coupon.type_name }}
				</view>
			</view>
			<view class="cp-r -flex ">
				<view class="cp-info">
					<view class="cp-title text-limit-2">
						{{ coupon.name }}
					</view>

					<view class="cp-desc" v-if="coupon.desc" v-html="coupon.desc">
					</view>

					<view class="cp-time text-limit-1" v-if="coupon.start_time">
						{{ coupon.start_time }} 至 {{ coupon.end_time }}
					</view>
				</view>
				<view class="cp-btn -flex -flex-col -flex-ac -flex-jc" v-if="coupon.state == 1" @click.stop="$go('/pages/tabs/index/index')">
					去使用
				</view>
				<view class="cp-btn cp-btn-end -flex -flex-col -flex-ac -flex-jc" v-if="coupon.state != 1" >
					已使用
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const {
		proxy
	} = getCurrentInstance()
	const props = defineProps({
		coupon: {
			type: Object,
		},
	})
	const {
		coupon,
	} = toRefs(props)

	function goUrl() {
		proxy.$go(`/pages-user/coupon/detail?code=${props.coupon.code}`)
	}
	
	
</script>

<style lang="scss" scoped>
	.-flex {
		display: flex;
	}

	.-flex-ac {
		align-items: center;
	}

	.-flex-jc {
		justify-content: center;
	}

	.-flex-col {
		flex-direction: column;
	}

	.c-box {
		margin-bottom: 24rpx;
		border-radius: 24rpx;

		.content {
			background-color: #fff;
			padding: 20rpx;
			border-top: 1px solid $bg;
			color: #000;
			font-size: 26rpx;
			line-height: 1.6;
			border-radius: 24rpx;
		}
	}

	.coupon-com {
		width: 100%;
		min-height: 200rpx;
		


		.cp-l {
			width: 200rpx;
			background: #fff3f2;
			position: relative;
			border-radius: 24rpx;

			.cpp-l-num {
				font-weight: bold;
				font-size: 54rpx;
				color: #f00;

				.cp-ico {
					font-size: 24rpx;
					margin-right: 6rpx;
					// position: relative;
					// top: 8rpx;
					// right: 4rpx;
				}
				
				.cp-icr{
					margin-left: 6rpx;
				}
			}

			.cp-tip {
				font-size: 24rpx;
				color: #f00;
				margin-top: 4rpx;
			}

		}

		.cp-r {
			flex: 1;
border-radius: 24rpx;
background: #fff;
			.cp-info {
				
				flex: 1;
				padding: 20rpx;

				.cp-title {
					max-width: 400rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #000;
					min-height: 72rpx;
				}

				.cp-desc {
					font-size: 22rpx;
					color: #999;
					margin-top: 8rpx;
				}

				.cp-time {
					font-size: 24rpx;
					color: #999;
					margin-top: 14rpx;
				}
			}

			.cp-btn {
				width: 80rpx;
				// height: 100%;
				border-radius: 0 24rpx 24rpx 0;
				writing-mode: vertical-rl;
				/*文字竖排属性*/
				text-orientation: mixed;
				border-left: 1px dashed #ececec;
				font-size: 24rpx;
				letter-spacing: 4px;
				color: #f00;
				// background-color: $main_color;
			}
			
			.cp-btn-end{
				color: #999;
			}
			
		}
	}
</style>